<template>
  <div class="height-full">
    <Tabs
      v-model="tabActiveValue"
      class="custom-tabs back-white mb20"
      @on-click="(name) => $router.push({ name: 'userManage', query: { t: name } })"
    >
      <TabPane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.value"></TabPane>
    </Tabs>

    <transition name="fade" mode="out-in">
      <component class="tc-container pt18 pl12 back-white" :is="tabActiveItem.component"></component>
    </transition>
  </div>
</template>

<script>
// components
import ManageUser from './children/ManageUser.vue'
import ProvideUser from './children/ProvideUser.vue'


export default {
  name: 'UserManage',

  components: { ManageUser, ProvideUser },

  data() {
    return {
      tabActiveValue: '',
      tabs: [
        { label: '管理端用户', value: 'manage', component: 'manage-user' },
        { label: '供稿端用户', value: 'provide', component: 'provide-user' },
      ],
    }
  },

  computed: {
    tabActiveItem() {
      return this.tabs.find((t) => t.value === this.tabActiveValue) || {}
    },
  },

  mounted() {
    this.tabActiveValue = this.$route.query.t || this.tabs[0].value
  },
}
</script>

<style lang="less" scoped>
.user-manage--table {
  /deep/ .table-oper {
    .ivu-btn {
      padding: 0 4px;
    }
  }
}
</style>

<style scoped>
.custom-tabs {
  padding: 14px 10px 6px;
}

.tc-container {
  min-height: calc(100% - 84px);
}
</style>
